<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">费用中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">账户概览</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="statics">
        <div class="statics-item">
          <div class="title">账户余额</div>
          <div class="content left">
            <span>账户余额:</span>
            <span class="value">¥ 656.00</span>
          </div>
        </div>
        <div class="statics-item" style="margin-left: 10px;">
          <div class="title">设备充值</div>
          <div class="content right">
            <div>
              <el-radio-group v-model="radio1" class="ml-10">
                <el-radio value="1" size="large" style="color:#fff">微信充值</el-radio>
                <el-radio value="2" size="large" style="color:#fff">支付宝充值</el-radio>
              </el-radio-group>
            </div>
            <div class="recharge df">
              <div>
                <span>充值金额</span>
                <el-input placeholder="请输入金额" style="width:140px;margin-left: 10px;height:28px;"></el-input>
              </div>
              <el-radio-group v-model="radio1" class="">
                <el-radio value="1" size="large" style="color:#fff">¥  100.00</el-radio>
                <el-radio value="2" size="large" style="color:#fff">¥  500.00</el-radio>
                <el-radio value="2" size="large" style="color:#fff">¥  1000.00</el-radio>
                <el-radio value="2" size="large" style="color:#fff">¥  3000.00</el-radio>
              </el-radio-group>
              <div>
                <el-button round color="#faaf3b" style="align-self: flex-end;color:#fff;height:28px;">提交</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备列表 -->
      <div class="tab-title">
        设备列表
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="零售柜" name="first">
          <!-- 搜索条件 -->
          <div class="search df">
            <div class="left df">
              <div class="search-item df">
                <div class="label">设备名称/编号</div>
                <el-input placeholder="请输入品牌名称" style="width:200px;"></el-input>
              </div>
              <div class="search-item df">
                <div class="label">服务时间</div>
                <div class="check-btn">
                  <el-button round color="#0071bb">全部</el-button>
                  <el-button round>即将到期</el-button>
                  <el-button round>已到期</el-button>
                </div>
              </div>
              <div class="search-item df">
                <div class="label">售卖状态</div>
                <div class="check-btn">
                  <el-button round color="#0071bb">全部</el-button>
                  <el-button round>停止售卖</el-button>
                  <el-button round>已到期</el-button>
                  <el-button round>代投放</el-button>
                </div>
              </div>
            </div>
            <span class="btn">
              <el-button round color="#0071bb" :icon="Search">搜索</el-button>
              <el-button round  :icon="RefreshLeft">重置</el-button>
			        <el-button round :icon="Refresh">刷新</el-button>
            </span>
          </div>
          <el-table :data="tableData1" style="width: 100%">
				  	<el-table-column prop="deviceName" label="设备名称" />
				  	<el-table-column prop="deviceNo" label="设备编号"/>
				  	<el-table-column prop="address" label="地址" />
				  	<el-table-column prop="acticeTime" label="激活时间" />
				  	<el-table-column prop="expireTime" label="到期时间" />
				  	<el-table-column prop="remainTime" label="剩余时间" />
				  	<el-table-column prop="status" label="设备状态" />
            <el-table-column prop="" label="操作">
			    		<template #default="scope">
                <el-button color="#0071BB" size="small" @click="handlRenew(scope.$index, scope.row)" style="color:#fff">续费</el-button>
        				<el-button color="#f6921e" size="small"  type="danger" @click="handleTransfer(scope.$index, scope.row)" style="color:#fff">迁移设备</el-button>
          		</template>
			    	</el-table-column>
				  </el-table>
          <div class="page_number">
			    	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
				      :disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
				      @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			    </div>
        </el-tab-pane>
        <el-tab-pane label="提货柜" name="second">
          <!-- 搜索条件 -->
          <div class="search aic">
            <div class="left aic">
              <div class="item aic">
                <div class="label">设备名称/编号</div>
                <el-input placeholder="请输入品牌名称" style="width:200px;"></el-input>
              </div>
              <div class="item aic">
                <div class="label">服务时间</div>
                <div class="check-btn">
                  <el-button round color="#0071bb">全部</el-button>
                  <el-button round>即将到期</el-button>
                  <el-button round>已到期</el-button>
                </div>
              </div>
              <div class="item aic">
                <div class="label">售卖状态</div>
                <div class="check-btn">
                  <el-button round color="#0071bb">全部</el-button>
                  <el-button round>停止售卖</el-button>
                  <el-button round>已到期</el-button>
                  <el-button round>代投放</el-button>
                </div>
              </div>
            </div>
            <span class="btn">
              <el-button round color="#0071bb" :icon="Search">搜索</el-button>
              <el-button round  :icon="RefreshLeft">重置</el-button>
			        <el-button round :icon="Refresh">刷新</el-button>
            </span>
          </div>
          <el-table :data="tableData1" style="width: 100%">
				  	<el-table-column prop="deviceName" label="设备名称" />
				  	<el-table-column prop="deviceNo" label="设备编号"/>
				  	<el-table-column prop="address" label="地址" />
				  	<el-table-column prop="acticeTime" label="激活时间" />
				  	<el-table-column prop="expireTime" label="到期时间" />
				  	<el-table-column prop="remainTime" label="剩余时间" />
				  	<el-table-column prop="status" label="设备状态" />
            <el-table-column prop="" label="操作">
			    		<template #default="scope">
                <el-button color="#0071BB" size="small" @click="handlRenew(scope.$index, scope.row)" style="color:#fff">续费</el-button>
        				<el-button color="#f6921e" size="small"  type="danger" @click="handleTransfer(scope.$index, scope.row)" style="color:#fff">迁移设备</el-button>
          		</template>
			    	</el-table-column>
				  </el-table>
          <div class="page_number">
			    	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
				      :disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
				      @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			    </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 续费 -->
    <Renew v-if="showRenew" @close="onClose()" @submit="onSubmit()"></Renew>
    <!-- 迁移设备 -->
    <Transfer v-if="showTransfer" @close="onCloseTransfer()" @submit="onSubmitTransfer()"></Transfer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Refresh, Search, RefreshLeft, HelpFilled } from "@element-plus/icons-vue";
import type { TabsPaneContext } from 'element-plus'
import Renew from './components/renew.vue'
import Transfer from './components/transfer.vue'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const radio1 = ref('1')
const tableData1 = ref([
  {deviceName:'新颜路1号',deviceNo:'869825043628429',address:'中国工商银行24小时自助银行(常熟新世纪支行)',acticeTime:'2024-04-22 11:15:07',expireTime:'#4D4D4D',remainTime:'10个月',status:'正常售卖'},
  {deviceName:'新颜路1号',deviceNo:'869825043628429',address:'中国工商银行24小时自助银行(常熟新世纪支行)',acticeTime:'2024-04-22 11:15:07',expireTime:'#4D4D4D',remainTime:'10个月',status:'正常售卖'},
  {deviceName:'新颜路1号',deviceNo:'869825043628429',address:'中国工商银行24小时自助银行(常熟新世纪支行)',acticeTime:'2024-04-22 11:15:07',expireTime:'#4D4D4D',remainTime:'10个月',status:'正常售卖'},
])
// 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
// 弹窗
const showRenew = ref(false)
// 续费
const handlRenew = () => {
  showRenew.value = true
}
// 提交
const onSubmit = () => {
	showRenew.value = false
}
// 关闭提现弹窗
const onClose = () => {
	showRenew.value = false
}
// 迁移
const showTransfer = ref(false)
const handleTransfer = (index: number, row: any) => {
  console.log(index, row)
  showTransfer.value = true
}
const onCloseTransfer = () => {
  showTransfer.value = false
}
const onSubmitTransfer = () => {
  showTransfer.value = false
}
</script>

<style scoped lang="scss">
.wechatPayment-page{
	padding: 20px 10px;
	box-sizing: border-box;
  background-color: #f1f1f1;
}
.wechatPayment-content{
	padding: 10px;
  background:#fff;
  margin-top:20px;
  border-radius:4px;
}
.df{
  display: flex;
}
.aic{
  display: flex;
  align-items: center;
}
.ml-10{
  margin-left: 10px;
}
// 统计
.statics{
  display: flex;
  color: #fff;
  .statics-item{
    flex: 1;
    .title{
      color: #4D4D4D;
      margin-bottom: 10px;
      font-weight: 500;
      font-size: 16px;
    }
    .content{
      border-radius: 10px;
      padding: 10px;
      height: 90px;
      box-sizing: border-box;
    }
    .left{
      background: #f6921e;
      display: flex;
      align-items: center;
      justify-content: center;
      .value{
        font-size: 26px;
        margin-left: 6px;
      }
    }
    .right{
      background: #0071bb;
    }
  }
}
// 设备列表
.search{
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  .btn{
    position: absolute;
    right: 30px;
  }
  .search-item{
    margin-right: 20px;
    align-items: center;
  }
  
  .label{
    color: #4D4D4D;
    font-size: 14px;
    padding: 0 10px;
  }
}
.submit{
  background: #f0a93e;
}
.tab-title{
  margin: 20px 0 10px 0;
  font-size: 16px;
}
.recharge{
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  height:28px;
  margin-top: 4px;
}
:deep(.el-radio__input.is-checked+.el-radio__label){
  color: #fff !important;
}
:deep(.el-tabs__active-bar){
  background-color: #1076b9 !important;
}
:deep(.el-tabs__item.is-active){
  color: #000000 !important;
}
</style>